<template>
  <div class="demo">
    <div class="demo-title">自定义按钮</div>
    <div class="demo-content">
      <Button type="primary" @click="openNotification">Open the notification box</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { h } from 'vue';
  import Button from '@sscd/button';
  import Notification from '@sscd/notification';
  const close = () => {
    console.log(
      'Notification was closed. Either the close button was clicked or duration time elapsed.'
    );
  };
  const openNotification = () => {
    const key = `open${Date.now()}`;
    Notification.open({
      message: 'Notification Title',
      description:
        'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
      btn: () =>
        h(
          Button,
          {
            type: 'primary',
            size: 'small',
            onClick: () => Notification.close(key),
          },
          { default: () => 'Confirm' },
        ),
      key,
      onClose: close,
    });
  };
</script>
